<template>
  <view class="bg-[#F3F4F6]">
    <view class="c-pd">
      <view class="flex justify-between items-center">
        <view class="c-color-sec c-text-14 pb-12px">第一紧急联系人</view>
        <view class="pb-12px"><van-button type="info" size="small" @click="handlePasteContent">一键粘贴</van-button></view>
      </view>
      <view class="bg-white c-br">
        <van-cell-group>
          <van-field label="联系人姓名" :value="state.contact.oneName" placeholder="请输入姓名" clearable @change="state.contact.onePhone = $event.detail"></van-field>
          <van-field label="联系人电话" :value="state.contact.onePhone" placeholder="请输入手机或固话" clearable :errorMessage="state.onePhoneError" @blur="handleCheckPhone(1)" @change="state.contact.onePhone = $event.detail"></van-field>
        </van-cell-group>
      </view>
    </view>

    <view class="px-12px">
      <view class="c-color-sec c-text-14 pb-12px">第二紧急联系人</view>
      <view class="bg-white c-br">
        <van-cell-group>
          <van-field label="联系人姓名" :value="state.contact.twoName" placeholder="请输入姓名" clearable @change="state.contact.twoPhone = $event.detail"></van-field>
          <van-field label="联系人电话" :value="state.contact.twoPhone" placeholder="请输入手机或固话" clearable :errorMessage="state.twoPhoneError" @blur="handleCheckPhone(2)" @change="state.contact.twoPhone = $event.detail"></van-field>
        </van-cell-group>
      </view>
    </view>

    <view class="c-pd">
      <view class="c-color-sec c-text-14 pb-12px">第三紧急联系人</view>
      <view class="bg-white c-br">
        <van-cell-group>
          <van-field label="联系人姓名" :value="state.contact.threeName" placeholder="请输入姓名" clearable @change="state.contact.threePhone = $event.detail"></van-field>
          <van-field label="联系人电话" :value="state.contact.threePhone" placeholder="请输入手机或固话" clearable :errorMessage="state.threePhoneError" @blur="handleCheckPhone(3)" @change="state.contact.threePhone = $event.detail"></van-field>
        </van-cell-group>
      </view>
    </view>
    <view class="c-pd mt-12px">
      <van-button round type="primary" size="large" @click="handleSaveLocaleContact">保 存</van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';
import useToast from '@/hooks/useToast';
import UserRequest from '@/request/userRequest';
import { useAppStore } from '@/store';
interface IState {
  contact: ILocaleContactRes;
  onePhoneError: string;
  twoPhoneError: string;
  threePhoneError: string;
}

const contactBasic: ILocaleContactRes = { localeId: 0, oneName: '', twoName: '', threeName: '', onePhone: '', twoPhone: '', threePhone: '' };
const store = useAppStore();
const { userInfo } = store.$state;
const { showToast } = useToast();
const state = reactive<IState>({ contact: contactBasic, onePhoneError: '', twoPhoneError: '', threePhoneError: '' });

onLoad((options) => {
  if (!options) return;
  getLocaleContactInfo(options.id);
});

const getLocaleContactInfo = (id: number) => {
  EquipRequest.GetLocaleContact({ localeId: id, hasLoading: true }).then((res) => {
    state.contact = res.data;
  });
};

const handleCheckPhone = (type: number) => {
  switch (type) {
    case 1:
      state.onePhoneError = type === 1 ? '手机号或固话格式错误' : '';
      break;
    case 2:
      state.twoPhoneError = type === 2 ? '手机号或固话格式错误' : '';
      break;
    case 3:
      state.twoPhoneError = type === 3 ? '手机号或固话格式错误' : '';
      break;
  }
};

const handlePasteContent = () => {
  UserRequest.GetUserContact({ userId: userInfo.userId }).then((res) => {
    let userContact = res.data;
    if (userContact) {
      for (const key of Object.keys(state.contact) as Array<keyof typeof state.contact>) {
        if (userContact.hasOwnProperty(key)) {
          state.contact[key] = userContact[key];
        }
      }
    }
  });
};

const handleSaveLocaleContact = () => {
  if (!state.contact) {
    showToast('请输入紧急联系人', 'fail');
    return;
  }
  let values = [state.contact.oneName, state.contact.onePhone, state.contact.twoName, state.contact.twoPhone, state.contact.threeName, state.contact.threePhone];
  if (values.every((value) => value === '')) {
    showToast('请输入紧急联系人', 'fail');
    return;
  }
  if (!state.contact.oneName && state.contact.onePhone) {
    showToast('请输入第一紧急联系人姓名', 'fail');
    return;
  } else if (state.contact.oneName && !state.contact.onePhone) {
    showToast('请输入第一紧急联系人电话', 'fail');
    return;
  } else if (!state.contact.twoName && state.contact.twoPhone) {
    showToast('请输入第二紧急联系人姓名', 'fail');
    return;
  } else if (state.contact.twoName && !state.contact.twoPhone) {
    showToast('请输入第二紧急联系人电话', 'fail');
    return;
  } else if (!state.contact.threeName && state.contact.threePhone) {
    showToast('请输入第三紧急联系人姓名', 'fail');
    return;
  } else if (state.contact.threeName && !state.contact.threePhone) {
    showToast('请输入第三紧急联系人电话', 'fail');
    return;
  }
  EquipRequest.SaveLocaleContact({}).then((res) => {
    showToast('保存成功', 'success');
  });
};
</script>
